
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/animate.css"/>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<script src="js/vue.js"></script>
    <title>首页</title>
	<style type="text/css">
		@keyframs height{
			0%{height:0;}
			100%{height:100%}
		}
	</style>
</head>
<body>
    <div id="contain">
		<div class="classify">
			<div class="classifyLeft">
				<div class="leftFirst" :class="index==firstIndex?'secondActive':''" v-for="(item,index) in leftList">
					<p @click="changeFirst(index)">{{item.title}}</p>
					<div class="leftSecond"  v-if="index==firstIndex">
						<p :class="index==firstIndex&&childIndex==secondIndex?'active':''" v-for="(child,childIndex) in item.child" @click="changeSecond(childIndex)">
							{{child}}
						</p>
					</div>
				</div>
			</div>
			<div class="classifyRight">
				<div class="rightList">
					<div class="rightItem" v-for="(item,index) in rightList" @click="route(index)">
						<div class="itemImg">
							<img src="item.url" >
						</div>
						<div class="itemText">
							{{item.text}}
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
	var vm = new Vue({
		el:"#contain",
		data:{
			leftList:[
				{title:'一年级',child:['一年级上册','一年级下册']},
				{title:'二年级',child:['二年级上册','二年级下册']},
				{title:'三年级',child:['三年级上册','三年级下册']},
				{title:'四年级',child:['四年级上册','四年级下册']},
				{title:'五年级',child:['五年级上册','五年级下册']},
				{title:'六年级',child:['六年级上册','六年级下册']},
			],
			rightList:[
				{url:"",text:'咏鹅'},{url:"",text:'咏鹅'},{url:"",text:'咏鹅'},
				{url:"",text:'咏鹅'},{url:"",text:'咏鹅'},{url:"",text:'咏鹅'},
				{url:"",text:'咏鹅'},{url:"",text:'咏鹅'},{url:"",text:'咏鹅'},
				{url:"",text:'咏鹅'},{url:"",text:'咏鹅'},{url:"",text:'咏鹅'},
				{url:"",text:'咏鹅'},{url:"",text:'咏鹅'},{url:"",text:'咏鹅'},
			],
			firstIndex:null,
			secondIndex:null,
		},
		methods:{
			// 修改一级菜单下标
			changeFirst(index){
				this.firstIndex == index?this.firstIndex = null : this.firstIndex = index;
				this.secondIndex = null;
			},
			// 修改二级菜单下标
			changeSecond(index){
				this.secondIndex != index? this.secondIndex = index : '';
			},
			// 跳转
			route(index){
				window.location.href = 'article.html'
			}
		},
	})
    
</script>
</html>